<template>
  <div v-if="temp" class="home-carousel">
    <Carousel
      v-show="carouselItems.length"
      ref="carouselTarget"
      :auto="true"
      :tool="true"
      :interval="6000"
      :sequence="false"
      :carousel-items="carouselItems"
    />
  </div>
</template>

<script lang="ts" setup>
import Carousel from "@/components/carousel/Carousel.vue";
import { reactive, ref, onMounted } from "vue";

const temp = ref(false);

const carouselItems = reactive([
  "http://file.konmio.com/image/10001.png",
  "http://file.konmio.com/image/10004.png",
  "http://file.konmio.com/image/10005.png"
]);

onMounted(() => {
  setTimeout(() => {
    temp.value = true;
  }, 100);
});
</script>

<style lang="less" scoped>
.home-carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
